<!--确认订单-->
<style scope>
.sub-item {
  color: #888 !important;
}

</style>
<template>
  <div>
    <group>
      <cell title="收货地址"></cell>
      <cell-box class="sub-item" v-if="address.addressId" is-link @click.native="selectAddress()">
        {{address.addressDetail}}
      </cell-box>
      <cell-box class="sub-item" v-else is-link @click.native="selectAddress()">
        请添加收获地址
      </cell-box>
    </group>
    <br/>
    <group>
      <cell title="商品信息"></cell>
    </group>
    <div>
      <flexbox>
        <flexbox-item :span="1/3">
          <div class="flex-demo"><img :src="goods.imageOne" style="height: 60px;"></div>
        </flexbox-item>
        <flexbox-item :span="2/3" style="margin-left: 0px;">
          <div class="flex-demo" style="border-bottom: 1px #CCCCCC solid;">{{goods.goodsName}}</div>
          <div class="flex-demo">{{goods.price}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x{{goodsCount}}
            <div style="float: right;">{{amount}}元&nbsp;&nbsp;</div>
          </div>
        </flexbox-item>
      </flexbox>
    </div>
    <group>
      <cell title="备注"></cell>
      <x-textarea :max="64" :placeholder="('备注')"></x-textarea>
    </group>
    <br/>
    <x-button type="primary" @click.native="insertOrder()">确认付款</x-button>
  </div>
</template>
<script>
import { CellBox, Group, Cell, Flexbox, FlexboxItem, Divider, XTextarea, XButton } from 'vux'

export default {
  components: {
    CellBox,
    Group,
    Cell,
    Flexbox,
    FlexboxItem,
    Divider,
    XTextarea,
    XButton
  },
  data() {
    return {
      userId: window.localStorage["userId"],
      goodsId: this.$route.query.goodsId,
      goodsCount: this.$route.query.goodsCount,
      address: [],
      goods: [],
      amount: '0',
      addressId: this.$route.query.addressId,
      orderId: ''
    }
  },
  mounted() {
    this.comfireAddress()
    this.comfireGoods()
  },
  methods: {
    selectAddress() {
      this.$router.push({
        path: '/tourl/addressList',
        query: {
          addressId: this.addressId,
          goodsId: this.goodsId,
          goodsCount: this.goodsCount
        }
      })
    },
    comfireAddress() {
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/order/comfireAddress.json",
        params: {
          userId: this.userId,
          addressId: this.addressId
        },
        successFc: (response) => {
          this.address = response.data.data
          this.addressId = this.address.addressId
        }
      });
    },
    comfireGoods() {
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/order/comfireGoods.json",
        params: {
          userId: this.userId,
          goodsId: this.goodsId
        },
        successFc: (response) => {
          this.goods = response.data.data
          this.amount = this.goodsCount * this.goods.price
        }
      });
      VV
    },
    insertOrder() {
      if (!this.addressId) {
        this.$store.commit('updateToast', '请选择收获地址')
        return
      }
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/order/insert.json",
        params: {
          userId: this.userId,
          addressId: this.addressId,
          goodsId: this.goodsId,
          count: this.goodsCount
        },
        successFc: (response) => {
          this.orderId = response.data.data
          this.$store.commit('updateToast', '下单成功，正前往支付')
        }
      });
    }
  }
}

</script>
